<!DOCTYPE html>
<html ng-app="App" ng-controller="myCtrl">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>爱鲜蜂</title>
		<link rel="stylesheet" type="text/css" href="lib/swiper.min.css"/>
		<script src="lib/angular.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="lib/angular-route.js" type="text/javascript" charset="utf-8"></script>
		<script src="lib/angular-ui-router.js" type="text/javascript" charset="utf-8"></script>
		<script src="lib/index.js" type="text/javascript" charset="utf-8"></script>
		<script src="lib/angular-css.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="html/home/home_index.js" type="text/javascript" charset="utf-8"></script>
		<script src="lib/angular-css.min.js"></script>
		<script src="html/market/market_index.js" type="text/javascript" charset="utf-8"></script>
		<script src="lib/swiper.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="html/me/me_index.js" type="text/javascript" charset="utf-8"></script>
		<script src="html/shop/shop_index.js" type="text/javascript" charset="utf-8"></script>

		<script src="lib/angular-css.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="lib/jquery-1.9.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="lib/jquery-ui.min.js"></script>
		<script src="lib/jquery.mCustomScrollbar.min.js"></script>
		<script src="lib/jquery.mousewheel.min.js"></script>

		<script src="lib/angular-css.min.js" type="text/javascript"></script>
		<script src="lib/jquery-3.1.1.js" type="text/javascript"></script>

		<style type="text/css">
			
			*{
				padding: 0;margin: 0;list-style: none;text-decoration: none;font-family: "微软雅黑";
			}
			html,body{
				width: 100%;height: 100%;
				
			}
			
			#foot{
				display: flex;flex-direction: row;justify-content: space-around;align-items: center;
				width: 100%;height: 60px;position: fixed;bottom: 0;left: 0;
				display: flex;justify-content: space-around;
				width: 100%;position: fixed;bottom: 0;left: 0;width: 100%;
				background: rgba(246,246,246,.95);
			}
			#foot a{
				display: block;
				width: 20%;text-align: center;	
			}
			#foot li{
				width: 25%;
			}
			#foot dl{
				width: 100%;
			}
			#foot dd{
				width: 100%;text-align: center;
			}
			#foot dt img{
				width: 40%;
				margin-left: 30%;
				margin-top: 20px;
			}
			#foot a img{
				width:30%;
			}
			#foot a span{
				color:#666;
				font-size: 15px;
			}
			.aa{
				position: relative;
			}
			.xa{
				position: absolute;
				background: red;
				padding: 5px 10px;
				border-radius: 100%;
				left:60%;
				top:-10%;
				display: none;
			}
		</style>
	</head>
	<body>

	

		<div ui-view class="warp"></div>
			<div id="foot">
				<a href="" ui-sref="/home" ng-click="click1()">
					<img src="img/footer-12.png" class="img1"><br>
					<span>首页</span>
				</a>
				<a href="" ui-sref="/market" ng-click="click2()">
					<img src="img/footer-2.png" class="img2"><br>
					<span>闪送超市</span>
				</a>
				<a href="" ui-sref="/shop" ng-click="click3()" class="aa">
					<span class="xa" style="color:white;">0</span>
					<img src="img/footer-3.png" class="img3"><br>
					<span>购物车{{number}}</span>
				</a>
				<a href="" ui-sref="/me" ng-click="click4()">
					<img src="img/footer-5.png" class="img4"><br>
					<span>我的</span>
				</a>
			</div>

	</body>
	<script src="lib/swiper.min.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		angular.module("App",["ui.router","angularCSS","home","shop","me","market"]).config(function($urlRouterProvider){
			$urlRouterProvider.otherwise("/home")
		}).controller('myCtrl',function($scope,$rootScope){
			$scope.click1 = function(){
				$(".img1").attr("src","img/footer-12.png")
				$(".img2").attr("src","img/footer-2.png")
				$(".img3").attr("src","img/footer-3.png")
				$(".img4").attr("src","img/footer-5.png")
			}
			$scope.click2 = function(){
				$(".img2").attr("src","img/footer-22.png")
				$(".img1").attr("src","img/footer-1.png")
				$(".img3").attr("src","img/footer-3.png")
				$(".img4").attr("src","img/footer-5.png")
			}
			$scope.click3 = function(){
				$(".img3").attr("src","img/footer-32.png")
				$(".img1").attr("src","img/footer-1.png")
				$(".img2").attr("src","img/footer-2.png")
				$(".img4").attr("src","img/footer-5.png")
			}
			$scope.click4 = function(){
				$(".img4").attr("src","img/footer-52.png")
				$(".img1").attr("src","img/footer-1.png")
				$(".img2").attr("src","img/footer-2.png")
				$(".img3").attr("src","img/footer-3.png")
			}
		})

	</script>
</html>
